<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期与时间选择</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-inline">
            <input type="text" class="layui-input" id="date1">
        </div>
        <hr>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="date2">
        </div>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="date3">
        </div>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="date4">
        </div>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="date5">
        </div>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="date6">
        </div>
    </div>
<script>
    layui.use("laydate", function () {
        var laydate = layui.laydate;

        laydate.render({
            elem: "#date1",
        });

        laydate.render({
            elem: "#date2",
            type: "year"
        });
        laydate.render({
            elem: "#date3",
            type: "month"
        });
        laydate.render({
            elem: "#date4",
            type: "date"// 默认值
        });
        laydate.render({
            elem: "#date5",
            type: "time"
        });
        laydate.render({
            elem: "#date6",
            type: "datetime",
            format: "yyyy年MM月dd日 HH时mm分ss秒",
            value: new Date(1534766888000)
        });
    });
</script>
</body>
</html>